<template>
  <div class="dynamic-component">
    <h2>动态组件</h2>
    <button @click="currentView = 'Home'">显示主页</button>
    <button @click="currentView = 'About'">显示关于页</button>
    <keep-alive>
      <component :is="currentView"></component>
    </keep-alive>
  </div>
</template>

<script>
import Home from './Home.vue'
import About from './About.vue'

export default {
  name: 'DynamicComponent',
  components: {
    Home,
    About,
  },
  data() {
    return {
      currentView: 'Home',
    }
  },
}
</script>

<style scoped>
.dynamic-component {
  border: 1px solid #ccc;
  padding: 20px;
  margin-bottom: 20px;
}
</style>
